<!--
 * @Author: yfp
 * @Date: 2024-03-30 20:00:53
 * @LastEditors: yehongbo 1394168736@qq.com
 * @LastEditTime: 2024-08-09 21:14:12
 * @Description: 
-->

<template>
  <div class="chat-room">
    <el-container class="cahr-container">
      <el-header class="chat-header">
        <div class="pro-title">保护定值修改行为识别</div>
        <div class="logo-box">
          <img src="@/assets/logo.png" />
        </div>
      </el-header>
      <el-container class="chat-container-content">
        <el-main class="chat-main">
          <el-tabs type="border-card" v-model="activeName" @tab-click="tabClick">
            <el-tab-pane name="1">
              <template #label>
                <span class="label_class" v-show="whos === 1">
                  <img v-show="activeName === '1'" src="@/assets/shishi_active.svg" alt="" />
                  <img v-show="activeName === '2'" src="@/assets/shishi.svg" alt="" />
                  实时告警
                </span>

                <span class="label_class" v-show="whos === 2">
                  <img v-show="activeName === '1'" src="@/assets/his_active.svg" alt="" />
                  <img v-show="activeName === '2'" src="@/assets/his.svg" alt="" />
                  历史记录
                </span>
              </template>
              <HisRecord1 v-show="whos === 1" @tabVal="changTab1" :setStep="setStep" @changeStep="changeStep">
              </HisRecord1>
              <HisRecord2 v-show="whos === 2" @tabVal="changTab2"></HisRecord2>
            </el-tab-pane>
            <el-tab-pane name="2">
              <template #label>
                <span class="label_class">
                  <img v-show="activeName === '1'" src="@/assets/msg.svg" alt="" />
                  <img v-show="activeName === '2'" src="@/assets/msg_active.svg" alt="" />
                  告警详情
                </span>
              </template>
              <keep-alive v-if="whos === 1">
                <AlarmDetail1 :file-name="name" :file-name-id="nameId" :baseTime="time" :dataInfo="dataInfo">
                </AlarmDetail1>
              </keep-alive>

              <keep-alive v-if="whos === 2">
                <AlarmDetail2 :file-name="name" :file-name-id="nameId" :pageTime="time"></AlarmDetail2>
              </keep-alive>
            </el-tab-pane>
          </el-tabs>
          <div class="changeTip">
            <el-button v-if="whos === 1 && activeName === '1'" @click="show('modelList1')">模型管理</el-button>
            <el-button v-if="whos === 1 && activeName === '2'" @click="show('modelDetail1')">模型配置</el-button>
            <el-button v-if="whos === 1" @click="changeAll(2)">历史告警</el-button>
            <el-button v-if="whos === 2" @click="changeAll(1)">实时告警</el-button>
          </div>
          <div v-if="modelList1" class="showModel_class zindex99">
            <modelList @selectName="selectNameFun" @addData="addDataFun" :rowCode="rowCode" :refreshState="refreshState"
              @selectTab="selectTab">
            </modelList>
          </div>
          <div v-if="modelDetail1" class="showModel_class zindex100">
            <modelDetail :selectName="selectName" @closeDetail="closeDetail" @submits="submits"></modelDetail>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, reactive, watch } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus"
import HisRecord1 from '@/components/HisRecord1.vue'
import AlarmDetail1 from '@/components/AlarmDetail1.vue'
import HisRecord2 from '@/components/HisRecord.vue'
import AlarmDetail2 from '@/components/AlarmDetail.vue'
import modelList from '@/components/modelList.vue'
import modelDetail from '@/components/modelDetail.vue'
// import hisRecord from "@/api/hisRecord";
import { useRouter } from 'vue-router';
const router = useRouter();

let activeName = ref('1');
let name = ref('');
let nameId = ref('');
let time = ref('')
let whos = ref(1)
let rowCode = ref('')
let tokenData = ''
let setStep = ref(false)
let dataInfo = reactive({})
let modelList1 = ref(false)
let modelDetail1 = ref(false)
let refreshState = ref('false')
let selectName = ref({
  name: 'PCS-931N5Y 保护定值修改',
  code: 'PCS-931N5Y',
  tagList: [
    { name: '定值修改', type: '' },
    { name: '12版保护', type: 'success' },
    { name: '大瓦特', type: 'danger' },
  ],
  msg: 'PCS-931N5Y保护定值修改模型，基于大瓦特模型底座构建，通过设计结构化的提示工程界面，自动生成提示工程指令，进一步提升识别准确率。',
  state: '已生效',
  text: '模型状态',
  time: '2024-07-15',
  count: 2224
})
watch(
  [() => activeName.value],
  () => {
    console.log('length activeName.value', activeName.value)
    if (activeName.value !== '1') return
    setStep.value = true
  },
  [() => name.value],
  () => {
    console.log('name.value', name.value)
    selectName.value = true
  }
);
const submits = (code, name) => {
  console.log(name, '================')
  if (selectName.value.code === code) {
    rowCode.value = code
    if (name == '终止生效') {
      selectName.value.state = '未生效'
    } else {
      selectName.value.state = '已生效'
    }
  }
}
// const imgUrl = ref([
//   require('@/assets/shishi.svg'),
//   require('@/assets/shishi_active.svg'),
//   require('@/assets/his.svg'),
//   require('@/assets/his_active.svg'),
//   require('@/assets/msg.svg'),
//   require('@/assets/msg_active.svg'),
// ])
const closeDetail = () => {
  modelDetail1.value = false
  modelList1.value = true
  refreshState.value = 'true'
  setTimeout(() => {
    refreshState.value = 'false'
  }, 100)
}
const selectTab = (num) => {
  modelList1.value = false
  modelDetail1.value = false
  whos.value = num
  activeName.value = '1';
}
const selectNameFun = (row) => {
  console.log('selectNameFun', row)
  selectName.value = row
  modelDetail1.value = true
}
const addDataFun = () => {
  selectName.value = {
    name: '',
    code: '',
    tagList: [
      { name: '定值修改', type: '' },
      { name: '12版保护', type: 'success' },
      { name: '大瓦特', type: 'danger' },
    ],
    msg: '',
    state: '未生效',
  }
  modelDetail1.value = true
}
const show = (name) => {
  console.log(name)
  if (name == 'modelList1') {
    modelList1.value = true
  } else if (name == 'modelDetail1') {
    modelDetail1.value = true
    selectName.code = 'PCS-931N5Y'
  }
}
const changeStep = (val) => {
  setStep.value = val
}
const changeAll = (num) => {
  whos.value = num
  activeName.value = '1';
  if (num === 1)
    setStep.value = true
}
const changTab1 = (val, nameVal, datailId, baseTime, shijian, obj) => {
  console.log('changTab shijian', shijian)
  whos.value = 1
  activeName.value = '2';
  name.value = shijian;
  nameId.value = datailId;
  time.value = baseTime
  dataInfo = obj
  console.log('changTab time.value', time.value)
  console.log('changTab name.value', name.value)

}
const changTab2 = (val, nameVal, datailId, pageTime) => {
  whos.value = 2
  activeName.value = '2';
  name.value = nameVal;
  nameId.value = datailId;
  time.value = pageTime
}
onBeforeMount(() => {
  // 先查cookies 的  accessToken
  // 没有则查链接
  console.log('location.search', location.search)
  console.log('localStorage.getItem', localStorage.getItem('accessToken'))

  if (localStorage.getItem('accessToken') && localStorage.getItem('accessToken') !== '') {
    tokenData = localStorage.getItem('accessToken')
  } else {
    const searchData = location.search.split("accessToken=")
    console.log(' location.search', location.search)
    if (searchData.length > 1 && searchData[1] !== "undefined") {
      tokenData = location.search.split("accessToken=")[1]
    }
  }
  console.log('tokenData', tokenData)
  if (tokenData === '') {
    showDialog('未获取到token，您可以继续留在该页面，或重新登录')
  } else {
    localStorage.setItem('accessToken', tokenData)
    router.push('/bhdzxgxwsbpage');
  }

  // const searchData = location.search.split("accessToken=")
  // console.log(' location.search', location.search)
  // if (searchData.length > 1 && searchData[1] !== "undefined") {
  //   tokenData = location.search.split("accessToken=")[1]
  // }
  // if (!tokenData || tokenData === '') {
  //   tokenData = localStorage.getItem('accessToken')
  // }
  // console.log('tokenData', tokenData)
  // if (tokenData === '') {
  //   showDialog('未获取到token，您可以继续留在该页面，或重新登录')
  // } else {
  //   localStorage.setItem('accessToken', tokenData)
  // }

})
const showDialog = (text) => {
  ElMessageBox({
    title: "系统提示",
    message: text,
    type: "warning",
    showCancelButton: true,
    confirmButtonText: "重新登录",
    cancelButtonText: "取消",
    beforeClose: (action, instance, done) => {
      if (action === "confirm") {
        ElMessage({
          type: "info",
          message: "跳转登录页",
        });
        // window.location.replace('http://example.com')
        window.location = "/#/dev/home";
      } else {
        done();
      }
    },
  }).then((action) => { });
};
// let showTB = ref(false);
const tabClick = (tab) => {
  if (tab.index == 1) {
    // ElMessage.error('请选择一条数据查看！');
  }
}
</script>

<style scoped>
.el-container,
.el-main {
  position: relative;
  height: 100%;
  padding: 0;
}

.chat-container-content {
  position: relative;
  height: calc(100% - 60px);
  padding: 12px;

  .chat-main {
    position: relative;

    .changeTip {
      position: absolute;
      top: 0px;
      right: 10px;
    }
  }
}

header {
  padding: 0;
}

.chat-room {
  width: 100vw;
  height: 100vh;
  background-color: #f2f3f5;
}

:deep(.el-tabs) {
  height: 100%;
  border: none;
  background-color: transparent;
}

:deep(.el-tabs__content) {
  height: calc(100% - 40px);
  padding: 0;
}

:deep(.el-tab-pane) {
  height: 100%;
}

.pro-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 57px;
  /* padding: 30px 0 30px; */
  font-size: 26px;
  font-weight: bold;
  color: #409eff;
  text-align: center;
  background: hsla(0, 0%, 100%, .5);
}

:deep(.el-tabs__header) {
  border: none !important;
  background-color: #f2f3f5;
}

:deep(.el-tabs__item) {
  font-size: 16px;
  font-weight: bold;
  border-radius: 20px 20px 0 0;
  border: none !important;
}

/* :deep(.el-tabs) {
  #dcdfe6
  border: none !important;
} */
.logo-box {
  height: 57px;
  display: flex;
  align-items: flex-end;
  position: fixed;
  right: 0px;
  top: 0px;
}

.logo-box img {
  width: 181px;
  height: 43px;
  display: inline-block;
  background-repeat: no-repeat;
}

.label_class {
  display: flex;
  justify-content: space-around;
  align-items: center;

  img {
    margin-right: 5px;
  }
}

.showModel_class {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.zindex99 {
  z-index: 99;
}

.zindex100 {
  z-index: 100;
}
</style>
